<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			var dataset=[150,220,360,450,110,130];
			//设置柱形图的参数
			var padding={left:20,top:20,right:20,bottom:20};
			var rectStep=25;
			var rectWidth=20;
			var height=600;
			var width=600;
			//创建画布
			var svg=d3.select("body")
					  .append("svg")
					  .attr("height",height)
					  .attr("width",width)
					  
			//设置比例尺
			var max=d3.max(dataset);
			var linear=d3.scaleLinear()
						 .domain([0,max])
						 .range([0,500]);
			var color=d3.scaleOrdinal(d3.schemeCategory10);//设置颜色比例尺
						 
			//添加矩形
			svg.selectAll("rect")					//选择空集
				.data(dataset)						//绑定数据
				.enter()							//获取enter部分
				.append("rect")						//添加矩形
				.attr("x",function(d,i){			//矩形的x位置
					return padding.left+rectStep*i;
				})
				.attr("y",function(d,i){			//矩形的y位置
					return height-padding.bottom-linear(d);   //加进比例尺
				})
				.attr("height",function(d){			//矩形的高度
					return linear(d);				//加进比例尺
				})
				.attr("width",rectWidth)			//矩形的宽度
				.attr("fill",function(d,i){
					return color(i);
				});			//使用颜色比例尺填充颜色
			//添加文字
			svg.selectAll("text")
				.data(dataset)
				.enter()
				.append("text")
				.attr("x",function(d,i){
					return padding.left+rectStep*i;
				})
				.attr("y",function(d){
					return height-padding.bottom-linear(d);  //加进比例尺
				})
				.attr("dy","1em")
				.text(function(d){
					return d;
				})
				.attr("font-size","14px");

		</script>
		
	</body>
</html>
